<template>
  <view class="page-content">
    <view style="padding: 0 32rpx">
      <view class="content-box">
        <view class="notice-box">
          <u-notice-bar
            mode="horizontal"
            :list="list"
            color="#000000"
            bg-color="rgba(255,214,0,0.25)"
            border-radius="4"
            :volume-icon="false"
            font-size="20"
          ></u-notice-bar>
        </view>
        <view class="form-box">
          <form-item-title text="宠物信息"></form-item-title>
          <u-form :label-style="labelStyle">
            <view class="flex-col justify-between group_6">
              <u-upload
                :action="action"
                :file-list="fileList"
                height="80"
                width="120"
                max-count="2"
              ></u-upload>
              <u-form-item label="宠物照片"
                ><text slot="right">点击上传</text></u-form-item
              >
            </view>

            <u-form-item label="品种"
              ><u-input input-align="right"
            /></u-form-item>
            <u-form-item label="年龄"
              ><u-input type="number" input-align="right"
            /></u-form-item>
            <u-form-item label="体重"
              ><u-input input-align="right"
            /></u-form-item>
            <u-form-item label="疫苗接种信息"
              ><u-switch
                slot="right"
                v-model="switchVal"
                active-color="#FCD610"
              ></u-switch
            ></u-form-item>
          </u-form>
        </view>
      </view>
      <form-item-title text="出售详情"></form-item-title>
      <view class="content-box">
        <view class="form-box">
          <u-form :label-style="labelStyle">
            <u-form-item label="出售地址"
              ><u-input input-align="right"
            /></u-form-item>
            <u-form-item label="期望价格"
              ><u-input type="number" input-align="right"
            /></u-form-item>
          </u-form>
        </view>
      </view>

      <view class="content-box">
        <view class="form-box">
          <u-form-item
            label="简介"
            :label-style="labelStyle"
            label-position="top"
          >
            <u-input
              type="textarea"
              placeholder="请输入"
              value="这里是宠物简介这里是宠物简介这里是宠物简介这里是宠物简介这里是宠物简介这里是宠物简介这里是宠物简介这里是宠物简介"
            />
          </u-form-item>
        </view>
      </view>
    </view>
    <view class="flex-col justify-center items-center">
      <view class="publish-btn"> 立即发布 </view>
    </view>
  </view>
</template>

<script>
import formItemTitle from 'components/index/form-item-title.vue'
export default {
  data() {
    return {
      switchVal: true,
      list: [
        '温馨提示：感谢您使用宠行宝•宠物巴士服务，平台提供信息共享服务，请您保护好自己的财产安全，期间的财物及人身安全责任需自行承担。',
      ],
      action: 'http://www.example.com', // 演示地址
      labelStyle: {
        fontWeight: 'bold',
        fontSize: '28rpx',
        whiteSpace: 'nowrap',
      },
      checked: true,
    }
  },
  methods: {},
  components: {
    formItemTitle,
  },
}
</script>

<style lang="scss" scoped>
.page-content {
  height: 100%;
  background-color: #f6f6f6;

  .content-box {
    width: 100%;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    .notice-box {
      padding: 24rpx;
    }

    .form-box {
      padding: 0 32rpx 32rpx 32rpx;
      margin-bottom: 40rpx;
      .my-radio {
        width: 100%;
        background: red;
        /deep/ .u-radio-group {
          width: 100%;
          display: flex;
          justify-content: space-between;
        }
      }

      .form-item {
        margin-top: 24rpx;

        .ml-9 {
          margin-left: 18rpx;
        }

        .section_2 {
          padding: 26rpx 36rpx 26rpx 44rpx;
          background-color: #ffd6000d;
          border-radius: 16rpx;

          .image_4 {
            width: 24rpx;
            height: 28rpx;
          }

          .font_3 {
            font-size: 28rpx;
            font-family: PingFang SC;
            line-height: 25.76rpx;
            font-weight: 700;
            color: #000000;
          }

          .text_2 {
            line-height: 26.12rpx;
          }

          .text-wrapper_2 {
            padding: 12rpx 0;
            background-color: #fbd610;
            border-radius: 8rpx;
            overflow: hidden;
            width: 100rpx;
            height: 44rpx;

            .font_2 {
              font-size: 20rpx;
              font-family: PingFang SC;
              line-height: 18.4rpx;
              color: #000000;
            }
          }

          .font_4 {
            font-size: 24rpx;
            font-family: PingFang SC;
            line-height: 22.1rpx;
            color: #666666;
          }
        }
      }

      .group_6 {
        padding: 32rpx 0 0 0;
        border-bottom: solid 2rpx #f3f3f3;

        .font_3 {
          font-size: 28rpx;
          font-family: PingFang SC;
          line-height: 25.76rpx;
          font-weight: 700;
          color: #000000;
        }

        .text_7 {
          line-height: 26.02rpx;
        }

        .image-wrapper {
          background-color: #ececec;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100rpx;
          height: 100rpx;
          font-size: 30px;
          color: #999999;
        }
      }
    }
  }

  /deep/ .u-add-tips {
    display: none;
  }

  .publish-btn {
    width: 90%;
    padding: 40rpx 0;
    background-color: #fbd610;
    border-radius: 68rpx;
    font-size: 32rpx;
    text-align: center;
    font-weight: 700;
    margin-bottom: 24rpx;
  }
}
.bottom-box {
  padding: 16rpx 0;
  background: #ffffff;
  box-shadow: 0rpx -8rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
  border-radius: 24rpx 24rpx 0rpx 0rpx;

  .mt-7 {
    margin-top: 14rpx;
  }

  .group_16 {
    padding-left: 36rpx;
    padding-right: 28rpx;

    .button_3 {
      width: max-content;

      .font_3 {
        font-size: 24rpx;
        font-family: PingFang SC;
        line-height: 22.4rpx;
        font-weight: 700;
        color: #666666;
      }

      .text_28 {
        color: #000000;
      }

      .section_11 {
        padding: 6rpx 20rpx;
        background-color: #f6f6f6;
        border-radius: 60rpx;

        .text_31 {
          color: #000000;
          font-size: 24rpx;
          line-height: 17.72rpx;
        }

        .text_30 {
          color: #ff7676;
          font-size: 40rpx;
          line-height: 28.48rpx;
          width: 180rpx;
        }
      }
    }

    .button_4 {
      padding: 28rpx 0;
      background-color: #fbd610;
      border-radius: 68rpx;
      width: 318rpx;
      height: 84rpx;

      .font {
        font-size: 32rpx;
        font-family: PingFang SC;
        line-height: 30.02rpx;
        font-weight: 700;
        color: #000000;
      }

      .text_29 {
        line-height: 29.88rpx;
      }
    }
  }
}
</style>